<template>
  <span v-if="readonly">
    <slot name="empName" :emp="{EmpName: empName, EmpId: value}">
      {{ empName }}
    </slot>
  </span>
  <div v-else>
    <el-input
      v-model="empName"
      :readonly="true"
      :disabled="disabled"
      :placeholder="placeholder"
    >
      <template slot="suffix">
        <i
          v-if="clearable"
          style="margin-right: 20px;cursor: pointer;"
          class="el-icon-delete-solid"
          @click="clear"
        />
        <i
          class="el-icon-s-custom"
          style="cursor: pointer;"
          @click="openEmp"
        />
      </template>
    </el-input>
    <empChoice
      :visible="empVisible"
      :emp-id="empId"
      :title="placeholder"
      :unit-id="unitId"
      :dept-id="deptId"
      :is-sub-company="isSubCompany"
      :company-id="companyId"
      :is-multiple="isMultiple"
      :is-entry="isEntry"
      @save="setEmp"
      @close="closeChoice"
    />
  </div>
</template>

<script>
import empChoice from './empChoice.vue'
import { getBasic, getBasics } from '@/api/emp/emp'
import store from '@/store'
export default {
  components: {
    empChoice
  },
  props: {
    clearable: {
      type: Boolean,
      default: true
    },
    disabled: {
      type: Boolean,
      default: false
    },
    companyId: {
      type: String,
      default: () => {
        return store.getters.curComId
      }
    },
    isMultiple: {
      type: Boolean,
      default: false
    },
    value: {
      // eslint-disable-next-line vue/require-prop-type-constructor
      type: String | Array,
      default: null
    },
    placeholder: {
      type: String,
      default: '选择员工'
    },
    unitId: {
      type: Array,
      default: null
    },
    deptId: {
      type: Array,
      default: null
    },
    isEntry: {
      type: Boolean,
      default: true
    },
    isSubCompany: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    },
    label: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      emp: null,
      empName: null,
      empId: null,
      empVisible: false
    }
  },
  computed: {
    comId() {
      return this.$store.getters.curComId
    }
  },
  watch: {
    value: {
      handler(val) {
        if (val) {
          this.reset()
        } else {
          this.emp = null
          this.empName = null
        }
      },
      immediate: true
    }
  },
  mounted() {},
  methods: {
    async reset() {
      if (this.emp == null) {
        if (!this.isMultiple) {
          this.emp = await getBasic(this.value, this.companyId)
          this.empName = this.emp.EmpName
        } else {
          const ids = Array.isArray(this.value) ? this.value : [this.value]
          this.emp = await getBasics(this.companyId, ids)
          this.empName = this.format(this.emp)
        }
      }
      this.$emit('update:label', this.empName)
    },
    clear() {
      this.empName = null
      this.emp = null
      this.$emit('update:label', null)
      this.$emit('input', null)
      this.$emit('change', null, null)
    },
    format(list) {
      let name = ''
      list.forEach(e => {
        name = name + ',' + e.EmpName
      })
      return name.substring(1)
    },
    closeChoice() {
      this.empVisible = false
    },
    openEmp() {
      if (this.value == null) {
        this.empId = null
      } else {
        this.empId = Array.isArray(this.value) ? this.value : [this.value]
      }
      this.empVisible = true
    },
    setEmp(e) {
      this.empVisible = false
      if (e.user.length === 0) {
        this.empName = null
        this.emp = null
        this.$emit('update:label', null)
        this.$emit('input', null)
        this.$emit('change', null, null)
        return
      }
      if (this.isMultiple) {
        const empId = e.user.map(a => a.EmpId)
        this.empName = this.format(e.user)
        this.emp = e.user
        this.$emit('update:label', this.empName)
        this.$emit('input', empId)
        this.$emit('change', empId, e.user)
      } else {
        const user = e.user[0]
        this.empName = user.EmpName
        this.emp = e.user
        this.$emit('update:label', this.empName)
        this.$emit('input', user.EmpId)
        this.$emit('change', user.EmpId, user)
      }
    }
  }
}
</script>
<style scoped>
.el-input {
  line-height: 36px;
}
</style>
